import { Control } from 'react-keeper';
import { Boxs, NavBar, Context, Group, Scroller } from 'saltui';
import CheckRound from 'salt-icon/lib/CheckRound';
const { HBox, Box, VBox } = Boxs;
require('./PageConfigpermission.styl');
const reactMixin = require('react-mixin');
const classNames = require('classnames');
const Actions = require('./actions');
const Store = require('./store');
const Selectbar = require('components/selectbar');
const Listclassitem = require('components/listclassitem')
class Configpermission extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            select_str: '',
            listdata: {},
            all_select: false
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleClickAllIcon = this.handleClickAllIcon.bind(this);
        this.handlePermission = this.handlePermission.bind(this);
        this.handleCb = this.handleCb.bind(this);
        this.title = Control.state.title;
        this.classId = Control.state.classId
        this.headtitle = Control.state.classStr;
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    //右侧导航按钮
    handleOnRightClick() {

    }

    selectGrouping(key) {
        const t = this;
        const element = window.groupEl[key];
        if (element) {
            element.scrollIntoView();
        }
    }
    handleClickAllIcon(e) {
        e.stopPropagation();
        this.setState({ all_select: !this.state.all_select })
    }
    handleCb(judge) {
        this.setState({ all_select: judge })
    }
    handlePermission() {
        if (this.title == "允许出校") {
            var status = "on"
        } else {
            var status = "off"
        }
        let arr = this.refs.listclassitem.selectId;
        if (arr && arr.length > 0) {
            Actions.ispermission({ status, classId: this.classId,selectId:arr });
        }
    }
    render() {
        let t = this;
        return (
            <div className="configpermission">
                <NavBar
                    className={classNames({"ios-nav-bar":window.isIphone})}
                    isShow={false}
                    title={this.title}
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={Context.noop}
                    rightText='取消'
                />
                <Group.List className="t-LH40">{this.headtitle}</Group.List>
                <Selectbar
                    selectStr={this.state.select_str}
                    onSelect={t.selectGrouping.bind(t)}
                />
                {JSON.stringify(this.state.listdata) != "{}" &&
                    <Scroller className="page" mouseWheel >
                        <Listclassitem
                            {...this.state.listdata}
                            origin="menu"
                            all_select={this.state.all_select}
                            handleCb={this.handleCb}
                            ref="listclassitem"
                        />

                    </Scroller >
                }
                <Group.List className="t-LH30 t-all">
                    <HBox vAlign="center">
                        <Box flex={1} >全选</Box>
                        <Box flex={1} className="t-FAR">
                            {this.state.all_select ? <CheckRound
                                onClick={this.handleClickAllIcon}
                                fill="rgb(14,98,181)"
                                width="20"
                                height="20"
                            /> :
                                <span className="circle" onClick={this.handleClickAllIcon}></span>
                            }
                        </Box>
                    </HBox>
                </Group.List>
                <div className={classNames("t-LH44 t-FAC t-foot", { "color": this.title == "允许出校" })} onClick={this.handlePermission}>{this.title}</div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch(Control.state)
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Configpermission, Reflux.connect(Store));

module.exports = Configpermission;
